$(function(){
	var t = $('.box:first').offset().top;
	var l = $('.box:first').offset().left;
	var w = $('.box:first').width();
	var h = $('.box:first').height();
	var currentId;
	var currentContainerId = 'container1';
	
	
	$('#back').live('click', function(){
		$(this).hide();
		$('#'+currentId).animate({
			top: t,
			left: l,
			width: w,
			height: h
		}, 500, function(){
			$('#'+currentId).fadeOut(500, function(){
				$('#'+currentContainerId).fadeIn(500);
			});
		});
	});
	$('.box').live('click', function(){
		var func = $(this).attr('func');
		if(func){
			t = $(this).offset().top;
			l = $(this).offset().left;
			w = $(this).width();
			h = $(this).height();
			currentId = $(this).attr('func');
			currentContainerId = $(this).parent().attr('id');
			
			var box = $('#'+currentId);
			if(box.length == 0){
				box = $('<div id="'+currentId+'" class="page"/>').css({
					top: t,
					left: l,
					width: w,
					height: h
				}).appendTo($('body'));
			}
			
			box.fadeIn(500);
			$(this).parent().fadeOut(500, function(){
				box.animate({
					top: 20,
					left: 0,
					width: '100%',
					height: '100%'
				}, 500, function(){
					box.load(func);
				});
				$('#back').show();
			});
		} else {
			$.jBox.info('新功能还未启用，请掌柜不要心急，我们比您更急着上线喔o(^_^)o', '新功能未上线喔!');
		}
	});
	$('#nextContainer').click(function(){
		$('#container1').animate({
			marginLeft: -$('body').width()
		}, 1000, function(){
			$('#container1').hide();
		});
		$('#container2').show().css('margin-left', $('#container1').width()).animate({
			marginLeft: 0
		}, 1000);
		
		$('#preContainer').show();
		$(this).hide();
	});
	$('#preContainer').click(function(){
		$('#container1').show().animate({
			marginLeft: 0
		}, 1000);
		$('#container2').animate({
			marginLeft:$('body').width()
		}, 1000, function(){
			$('#container2').hide();
		});
		$('#nextContainer').show();
		$(this).hide();
	});
});
